<template>
  <div class="header-wrap">
    <div v-if="showTag" :class="['pre-view-tips', showTag]">
      <div>{{ showTag === 'preview' ? '体验' : '镜像' }}</div>
    </div>
    <div class="header-logo" @click="goHome">
      <img src="../assets/images/logo.png" alt="" />
    </div>
    <div v-if="nodataShow" class="header-menu" @click="showMenu">
      <span>
        <i></i>
        <i class="special"></i>
      </span>
      <span>
        <i></i>
        <i></i>
      </span>
    </div>
    <div v-if="userInfo && userInfo.originalUser" class="header-user">
      <mds-dropdown placement="bottomLeft">
        <span class="dropdown-link">
          <span class="header-username">
            {{ userInfo.originalUser.name || userInfo.originalUser.oa }}
            <span v-if="userInfo.isProxy">
              (代理用户{{ userInfo.currentUser.name || userInfo.currentUser.oa }})
            </span>
          </span>
          <mds-icon type="line-caret-down" />
        </span>
        <mds-menu slot="overlay" class="out_box" @click="handleCommand">
          <mds-menu-item index="my">个人中心</mds-menu-item>
          <mds-menu-item index="out">退出登录</mds-menu-item>
        </mds-menu>
      </mds-dropdown>
    </div>
  </div>
</template>

<script lang="ts">
  import { Component, Watch, Vue } from 'vue-property-decorator'
  import { handleSSO } from '@/utils/func'

  @Component()
  export default class Header extends Vue {
    private routeTitleKey = 0
    private loading = false
    private showPopper = false
    private isShowRouterName = true
    nodataShow = false
    get showTag() {
      const host = window.location.host
      if (host.includes('preview')) {
        return 'preview'
      } else if (host.includes('mirror')) {
        return 'mirror'
      } else return ''
    }

    @Watch('$route')
    handleQueryChange(to: any, from: any): void {
      if (to.path === '/search') {
        this.search = to.query.keyWord || ''
        this.refreshShowRouterName()
      }
      this.routeTitleKey = Date.now()
    }

    @Watch('showPopper')
    addListener(newVal: boolean): void {
      if (newVal) {
        document.body.addEventListener(
          'click',
          () => {
            this.showPopper = false
          },
          { once: true }
        )
      }
    }
    get userInfo() {
      // let storeObj = this.$store.state.user.userInfo
      let storeObj = require('./userInfo')
      let data: any = {}
      if ('currentUser' in storeObj) {
        data = storeObj
      } else {
        let storageUserInfo: string | null = localStorage.getItem('userDetails')
        data = storageUserInfo && JSON.parse(storageUserInfo)
      }
      this.avatarUrl = data?.currentUser?.avatar
      return data
    }

    private refreshShowRouterName(): void {
      this.isShowRouterName = false
      this.$nextTick(() => {
        this.isShowRouterName = true
      })
    }

    // 获取功能库
    private async getFunctionalLibraryFn() {
      let count = 0
      // const res = await getFunctionalLibrary()
      this.nodataShow = true
    }

    // methods
    public showMenu() {
      this.$router.push('/menu').catch((err: any) => err)
    }
    public goHome() {
      this.$router.push('/').catch((err: any) => err)
    }

    public async handleCommand(command: any) {
      if (command.index === 'out') {
        if (process.env.NODE_ENV === 'development') {
          document.cookie =
            encodeURIComponent('SSO_SESSION_ID') + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT'
          window.location.reload()
        } else {
          window.location.href = handleSSO('logout')
        }
        const destroyIntro = localStorage.getItem('destroyIntro')
        sessionStorage.clear()
        localStorage.clear()
        localStorage.setItem('destroyIntro', destroyIntro + '')
      } else {
        this.$message.error('请先使用账号登录')
      }
    }

    private created() {
      this.getFunctionalLibraryFn()
    }
  }
</script>

<style lang="scss" scoped>
  .header-wrap {
    position: relative;
    z-index: 20;
    padding-left: 40px;
    padding-right: 16px;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    height: 64px;
    background: #1f6dea;

    .pre-view-tips {
      position: absolute;
      top: 0;
      left: 0;
      background: #ff8900;
      width: 64px;
      height: 64px;
      clip-path: polygon(0 0, 64px 0, 0 64px);
      transform-origin: 0 0;

      div {
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        transform: rotate(315deg);
      }

      &.mirror {
        background: linear-gradient(60deg, rgba(250, 250, 250, 1) 25%, rgba(210, 210, 210, 1));

        div {
          color: #666666bd;
        }
      }
    }

    .header-logo {
      position: relative;
      margin-right: 68px;

      img {
        display: block;
        width: 65px;
        height: 29px;
        margin-bottom: 2px;
        cursor: pointer;
      }

      span {
        position: absolute;
        left: 70px;
        top: 2px;
        color: #fff;
        font-size: 14px;
        width: 74px;
      }
    }

    .header-menu {
      cursor: pointer;
      margin-right: 52px;
      width: 32px;
      height: 32px;
      padding: 8px;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: space-between;

      span {
        display: inline-flex;
        width: 100%;
        height: 6.8px;
        justify-content: space-between;
        align-items: stretch;
      }

      i {
        display: inline-block;
        width: 6.8px;
        height: 6.8px;
        background: #fff;
        border-radius: 1.5px;

        &.special {
          background: #ffa44b;
          transition: transform ease-in-out 0.5s;
        }
      }

      &:hover .special {
        transform: rotate(405deg) scale(1.1);
      }
    }

    .header-user {
      position: absolute;
      right: 20px;
      z-index: 10;
      .dropdown-link {
        cursor: pointer;
        color: rgba(255, 255, 255, 0.671);
      }
    }
  }
</style>
